<template>
	<view class="content bg-light">
		<tabsTop tabName="充值中心"></tabsTop>
		<view class="bg-white" style="min-height: 578px;">
			<!-- 图标 -->
			<view class="fixed-element bg-white">
				<view class="icon-tab-container p-2 m-2">
					<image class="icon rounded-circle" :src="logo" mode="aspectFit"></image>
					<text class="tab-text">小康龙江</text>
				</view>
			</view>
			<view style="margin-top: 35px;border-bottom: 1px solid #ccc;">
				<!-- 店铺余额 -->
				<view class="p-2" style="font-size: 14px;">
					<view class="p-2">店铺余额</view>
					<view class="flex justify-between align-center p-2">
						<view>{{balance}}</view>
						<view class="flex" @click="goBalance">
							<view>储值管理</view>
							<uni-icons type="right" size="16"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<!-- RMB -->
			<view class="RMB m-2 rounded p-4">
				<view style="font-size: 33px;color: #09bb07;">{{RMB}}</view>
				<view class="p-1" style="font-size: 10px;color: #47cc45;">RMB</view>
			</view>
			<!-- 获得 -->
			<ul>
				<li>
					<view class="p-2" style="font-size: 10px;">
						<view>你将获得</view>
						<ul class="p-1">
							<li>充10元送0.1元</li>
						</ul>
					</view>
				</li>
				<li>
					<!-- 充值须知 -->
					<view class="p-2" style="font-size: 10px;">
						<view>充值须知</view>
						<ul class="p-1">
							<li>充值后可在【我的】查看余额。</li>
							<li>余额仅可用于消费，不可提现/找零。</li>
							<li>资金将直接进入商家账户。</li>
							<li>查看《储值卡消费者服务协议》</li>
						</ul>
					</view>
				</li>
			</ul>
			<!-- 立即充值 -->
			<view>
				<view class="fixed-button shadow bg-white">
					<button class="but">立即充值</button>
				</view>
			</view>
		</view>
		<!-- 底部赞助信息 -->
		<botSponsor></botSponsor>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import botSponsor from "@/components/botsponsor/sponsor.vue"
	export default {
		components: { //轮播图组件
			tabsTop,
			botSponsor // 底部赞助商
		},
		data() {
			return {
				logo: app.globalData.Domain_ICON+'/sponsor.jpg',
				balance: '',
				RMB: '10',
			}
		},
		onReady() {

		},
		onLoad(options) {
			const balance = decodeURIComponent(options.balance)
			this.balance = balance
		},
		methods: {
			goBalance(){
				uni.navigateTo({
					url: "/pages/my/balance",
				})
			},
		}
	}
</script>

<style>
	.fixed-element {
		position: fixed;
		top: 63px;
		left: 0;
		width: 100%;
		z-index: 999;
	}

	.icon-tab-container {
		display: flex;
		align-items: center;
	}


	.tab-text {
		margin-left: 10px;
		font-size: 10px;
		font-weight: bold;
	}

	.tab-bar {
		display: flex;
		border-bottom: 1px solid #ccc;
	}

	.tab-item {
		text-align: center;
		padding: 10px;
		font-size: 14px;
		cursor: pointer;
	}

	.active {
		color: #007BFF;
	}

	.tab-indicator {
		position: absolute;
		top: 86px;
		left: 0;
		height: 4px;
		background-color: #00bfff;
		transition: left 0.3s;
	}

	.recharge {
		width: 35%;
		margin: auto;
		background-color: #09bb07;
		color: white;
		height: 35px;
		font-size: 11px;
		border-radius: 20px;
		margin-top: 40px;
	}

	.icon {
		width: 20px;
		height: 20px;
	}

	image {
		width: 20px;
		height: 20px;
	}

	.RMB {
		height: 120px;
		background-color: #f1fbf0;
	}

	ul li view ul li::before {
		content: '•';
		/* 使用实心圆点作为列表项的标志 */
		margin-right: 5px;
		/* 可以根据需要调整圆点与文本之间的间距 */
	}

	.fixed-button {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		padding: 10px 20px;
		cursor: pointer;
		width: 100%;
		text-align: center;
		font-size: 12px;
	}

	.but {
		width: 95%;
		width: 95%;
		font-size: 13px;
		background-color: #09bb07;
		color: white;
		border-radius: 19px;
	}
</style>